<template>
  <div class="common-content">
    <div class="video-content">
      <h1 class="video-title">{{videoTitle}}</h1>
      <sc-video v-if="videoSrc" autoplay :src="videoSrc"></sc-video>
    </div>
    <ul class="right-list">
      <li class="title-header">其他视频</li>
      <li @click="loadPageData(item.id)" v-for="item in dataList" :key="item.id">
        <img :src="$TOOL.filterUrl(item.imgUrl)" alt="">
        <div class="right-content">
          <div class="title">{{item.title}}</div>
          <div class="desc">{{item.createDate}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>

import ScVideo from "@/components/scVideo/index.vue";
import {homeApi} from "@/api";
import {useRoute} from "vue-router";
import  tool from '@/utils/tool'
const  dataList=ref([])
const videoSrc=ref("")
const videoTitle=ref("")
onMounted(()=>{
  loadPageData(route.query.id)
  loadList()
})
const route=useRoute()
async function loadPageData(id){
  videoSrc.value=''
  const result=await  homeApi.videoView.get({id})
  videoSrc.value=tool.filterUrl(result.url)
  videoTitle.value=result.title
}

async function loadList(){
  const res=await homeApi.videoViewInfoListPage.get({
    pageNum:1,
    pageSize:4
  })
  dataList.value=res.list
}
</script>

<style scoped lang="scss">
.common-content{
  display: flex;
  align-items: flex-start;
  padding: 30px 0;
  gap: 16px;
  .video-content{
    flex: 1;
    padding: 16px;
    background: #FFFFFF;
    min-height: 660px;
  }
  .video-title{
    font-size: 30px;
    margin-bottom: 20px;
  }
  .right-list{
    width: 29%;
    min-width: 300px;

    background: #FFFFFF;
    .title-header{
      font-size: 26px;
      color: $base-color;
      font-weight: bold;
    }
    li{
      width: 100%;
      padding:24px 20px;
      border-bottom: 1px solid #cccccc;
      display: flex;
      align-items: flex-start;
      cursor: pointer;
      &:hover{
        .title{
          font-weight: bold;
          color:$base-color
        }
      }
      &:last-child{
        border-bottom: none;
      }
      img{
        width: 50%;
        object-fit: cover;
        aspect-ratio: 16 / 9;
        display: block;
        border-radius: 8px;
        margin-right: 20px;
      }
      .title{
        font-size: 16px;
        margin-bottom: 10px;
      }
      .desc{
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
</style>
